<template>
  <div class="box bgfff">
    <header>
      <div class="font-16 box-center logo">智能屋</div>
    </header>
    <main>
      <ul>
        <li class=" flex-col flex-middle box-sizing border-b">
          <i class="iconfont icon-yonghu margin-r10"></i>
          <input type="text" v-model="phone" class="box1" placeholder="请输入账号">
        </li>
        <li class=" flex-col flex-middle box-sizing border-b">
          <i class="iconfont icon-yanzhengma margin-r10"></i>
          <input type="number" v-model="code" class="box1" placeholder="请输入验证码">
          <div class="code cfff bor-r5 font-12" :class="{active:hasCodeText}" @click="getCode(this)">{{codeText}}</div>
        </li>
        <li class=" flex-col flex-middle box-sizing border-b">
          <i class="iconfont icon-mima1 font-22"></i>
          <input type="password" v-model="password" class="box1" placeholder="请输入密码">
        </li>
        <li class=" flex-col flex-middle box-sizing border-b">
          <i class="iconfont icon-company margin-r10"></i>
          <input type="text" v-model="company" class="box1" placeholder="请填写所属经纪公司">
        </li>
        <li class=" flex-col flex-middle box-sizing border-b">
          <i class="iconfont icon-bianmubianma margin-r10 font-18"></i>
          <input type="text" v-model="coding" class="box1" placeholder="请填写门店编码">
        </li>
      </ul>
      <div class="handle c82 font-14">
        <!-- <div class="padding-lr20 f-l">注册</div> -->
        <div class="padding-lr20 f-r" @click="toRouter('login')">返回登录</div>
      </div>
      <footer class="box-center font-16 box-center">
        <div class="cfff box-center" @click="register">注册</div>
      </footer>
    </main>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "register",
  data() {
    return {
      hasCodeText: false, // 获取验证码背景色
      codeText: "获取验证码",
      phone: "",
      password: "",
      code: "",
      coding: "",
      company: ""
    };
  },
  methods: {
    //自定义函数
    // 获取验证码
    getCode() {
      let that = this;
      let phone = this.phone;
      // 验证手机格式
      if (!that.hasPhone()) return;

      this.http
        .get("user/getCode", {
          phone: phone
        })
        .then(res => {
          console.log("请求成功11111111111" + JSON.stringify(res));

          let time = 60,
            $time;
          $time = setInterval(function() {
            that.hasCodeText = true;
            --time;
            that.codeText = time + "s后重新获取";
            if (time <= 0) {
              that.hasCodeText = false;
              that.codeText = "获取验证码";
              clearInterval($time);
              console.log("清除定时器");
            }
          }, 1000);
        })
        .catch(res => {
          console.log("请求失败22222222222" + JSON.stringify(res));
        });
    },

    // 手机验证
    hasPhone() {
      let phone = this.phone;
      if (phone === "") {
        this.layer("请输入手机号");
        return false;
      }
      if (!this.hasMobile(phone)) {
        this.layer("请输入正确格式的手机号");
        return false;
      }
      return true;
    },

    //注册
    register() {
      let that = this;
      let password = this.password,
        mobile = this.phone,
        code = this.code;

      if (!this.hasPhone()) return;

      if (code === "") {
        this.layer("请输入验证码");
        return;
      }
      if (this.password.length < 6) {
        this.layer("密码长度不能小于6位");
        return;
      }

      this.http
        .post("user/register", {
          mobile: mobile,
          password: password,
          code: code
        })
        .then(res => {
          that.layer("注册成功");
          setTimeout(() => {
            that.toRouter("login");
          }, 1200);

          console.log("请求成功11111111111" + JSON.stringify(res));
        })
        .catch(res => {
          console.log("请求失败22222222222" + JSON.stringify(res));
        });
    }
  }
};
</script>

<style scoped lang="scss">
header {
  position: relative;
  height: 2rem;
  background: no-repeat url(../../image/loginbg.png) center center / cover;
  .logo {
    width: 1rem;
    height: 0.6rem;
    border-radius: 0.1rem;
    background: #fff;
    color: red;
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    margin-left: -0.5rem;
    box-shadow: 0 0 0.15rem #aaa;
  }
}
main {
  ul {
    padding: 0.2rem 0.2rem 0 0.2rem;
    li {
      // height: 0.45rem;
      padding: 0.3rem 0 0.15rem;
      display: flex;
      // justify-content: center;
      align-items: flex-end;
      div {
        padding-right: 0.08rem;
      }
      .code {
        padding: 0.04rem 0.1rem;
        background: #2879ff;
        &.active {
          background: #e1e1e1;
        }
      }
    }
  }
  .handle {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
  }
}
footer {
  // padding-top: .6rem;
  padding-bottom: 0.4rem;
  div {
    width: 80%;
    height: 0.45rem;
    background: #e12825;
    border-radius: 0.05rem;
  }
}
</style>
